<template>
	<view :style="{ paddingTop: safeAreaTop + 'px' }">
		<up-navbar title="双人合盘" :autoBack="true" />
		<template v-if="false">
			<!-- 引导页 -->
			<duo-guide />
		</template>
		<view class="content mt-2 pl-2 pr-2">
			<view class="flex-r s-b a-c">
				<up-search v-model="searchKeyword" placeholder="搜索姓名" :showAction='false' shape="square"
					bgColor="#F9F9F9" height="40" />
				<text class="iconfont-color icon-shoucang ml-1"
					@click="handleTo('/pages/home/components/archivesManagement/addCombination?pageTitle=双人')" />
			</view>
			<view class="flex-r mt-2 filter">
				筛选项 <up-icon name="arrow-down" />
			</view>
			<view class="">
				<view class="archives-item flex-r a-c" @click="handleTo('/pages/home/components/personalMap/duo')">
					<image src="@/static/images/home/duo-avatar.png" mode=""></image>
					<view class="ml-2">
						<text class="name">Fewoj - Gkingh</text>
						<view class="report">
							显化生产者 · 荐骨权威 · 2/4 · 二分人
						</view>
						<view class="report">
							投射者 · 荐骨权威 · 1/3 · 一分人
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import duoGuide from "./components/duoGuide.vue"
	import {
		ref
	} from 'vue'
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	const searchKeyword = ref('')
	const handleTo = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		.iconfont-color {
			font-size: 64rpx;
		}

		.filter {
			font-size: 24rpx;
			color: #4D4D4D;
		}

		.archives-item {
			padding: 30rpx 40rpx;
			box-shadow: 0px 1px 0px 0px #EEEEEE;

			image {
				width: 55px;
				height: 70px;
			}

			.name {
				font-weight: 500;
				font-size: 28rpx;
				color: #0C0C0C;
			}

			.report {
				font-size: 20rpx;
				color: #797979;
				margin-top: 8rpx;
			}
		}
	}
</style>